<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        #box3{
            width: 100%;
            height: 100px;
            background: #333;
        }
        #box4{
            min-height: 3000px;
            background: pink;
        }
    </style>
</head>
<body>
    <!--  
        1. 框架事件
            onload      当页面or图片加载成功时触发
            onresize    当页面大小发生改变时触发
            onerror     当页面or图片记载失败时触发
            onscroll    当页面发生滚动时触发
        2. 获取当前滚动条距离顶部的距离
            document.document.body.scrollTop
            document.documentElement
    -->
    <script>
        // 当页面加载完成后,再执行函数2
        window.onload = function(){
            var box = document.getElementById('box');
            console.log(box); 
        }
    </script>
    <div id="box"></div>
    <script>
        window.onresize = function(){
            var r = Math.round(Math.random() * 255);
            var g = Math.round(Math.random() * 255);
            var b = Math.round(Math.random() * 255);
            document.body.style.backgroundColor = `rgb(${r} , ${g}, ${b})`;
        }
    </script>
    <div id="box2">
        <img src="./img/1.jpg" height="200">
        <img src="./img/2.jpg" height="200">
        <img src="./img/30.jpg" height="200">
        <img src="./img/4.jpg" height="200">
        <img src="./img/50.jpg" height="200">
    </div>
    <script>
        var img = document.getElemenstByTagName('img');
        for(var i = 0;i < img.length;i++){
            img[i].onerror = function(){
                this.src = 'img/error.jpg';
            }
        }
    </script>
    <div id="box3"></div>
    <div id="box4"></div>
    <script>
        // 为box4内部填充内容
        var box4 = document.getElementById('box4');
        var str = '';
        for(var i = 1;i < 5000;i++){
            str += (i +'<br>');
        }
        box4.innerHTML = str;
        var box3 = document.getElementById('box3');
        window.onscroll = function(){
            var top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
            console.log(top);
            if(top >= 201){
                box3.style.position = 'fixed';
                box3.style.top = '0px';
                box3.style.left = '0px';
            }else{
                box3.style.position = 'static';
            }
        }
    </script>
</body>
</html>